<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2017/12/5
  Time: 22:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
    <title>物流黄页</title>
    <meta charset="utf-8">
    <jsp:include page="../common/portal-head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/logistics.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/portal/css/page.css">

</head>
<body>
<div class="page-container">
    <jsp:include page="../portal/topmenu.jsp"></jsp:include>
    <jsp:include page="../portal/slider.jsp"></jsp:include>
    <div class="content-wrap">
        <div class="search-wrap">
            <div class="search-box-wrap">
                <div class="search-box">
                    <div class="search-box-input">
                        <input type="text" id="keyword" name="keyword" placeholder="请输入关键词检索资讯内容" />
                        <button class="serach-button" onclick="searchSub('keyword','keyword',1)">搜索</button>
                    </div>
                    <div class="brach-advise">
                        <span>热门搜索</span>
                        <div id="hotSearchshop">
                        <a>三枪</a>
                        <a>阿玛尼</a>
                        <a>都市丽人</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-fillter-wrap">
                <div class="seller-filiter" onclick="showAreaDialog()">
                    <label class="city-lable" >默认全国</label>
                </div>
                <div class="default-dec" onclick="searchSub('default','',1)">
                    <span>综合<i class="fa fa-sort-amount-desc"></i></span>
                </div>
            </div>
        </div>
        <div class="seller-list-wrap" id="companyList">
            <div class="seller-item-outline">
                <div class="seller-item">
                    <div class="seller-dsc">
                        <img src="${ctx}/resources/portal/img/banner/logistics_01.jpg">
                        <div class="dsc-info">
                            <p>顺丰速运是一家主要经营国际、国内快递业务的港资快递企业，于1993年3月26日在广东顺德成立。顺丰速运是中国速递行业中投递速度最快的快递公司之一</p>
                            <span><img src="${ctx}/resources/portal/img/address.png">广东省深圳市福田区福华路万基商务大厦</span>
                        </div>
                    </div>
                    <div class="seller-info">
                        <span class="info-title"><img src="${ctx}/resources/portal/img/shop_info.png">相关资讯</span>
                        <ul>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="seller-item-outline">
                <div class="seller-item">
                    <div class="seller-dsc">
                        <img src="${ctx}/resources/portal/img/banner/logistics_02.jpg">
                        <div class="dsc-info">
                            <P>上海圆通速递有限公司有各类运输车辆千余辆，员工3万余名，服务覆盖全国500多个城市。成立于2000年5月28日。经过十六年的精心打造，现已成为集速递、物流、电子商务为一体的大型民营企业。</p>
                            <span><img src="${ctx}/resources/portal/img/address.png">上海青浦区华新镇</span>
                        </div>
                    </div>
                    <div class="seller-info">
                        <span class="info-title"><img src="${ctx}/resources/portal/img/shop_info.png">相关资讯</span>
                        <ul>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="seller-item-outline">
                <div class="seller-item">
                    <div class="seller-dsc">
                        <img src="${ctx}/resources/portal/img/banner/logistics_03.jpg">
                        <div class="dsc-info">
                            <div class="company-name">
                                <span>顺丰速运</span>
                            </div>
                            <p>韵达快递，是集快递、物流、电子商务配送和仓储服务为一体的全国网络型品牌快递企业，创立于1999年8月，总部位于中国上海  ，服务范围覆盖国内31个省（区、市）及港澳台地区。</p>
                            <span><img src="${ctx}/resources/portal/img/address.png">上海</span>
                        </div>
                    </div>
                    <div class="seller-info">
                        <span class="info-title"><img src="${ctx}/resources/portal/img/shop_info.png">相关资讯</span>
                        <ul>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                            <li><a href="#">直击低价，冷运干线大派送</a><span>2017.10.20</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="page" class="page_div"></div>
    </div>
</div>
<jsp:include page="../portal/footer.jsp"></jsp:include>
<div class="modal fade" id="areaSlectBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择城市</h4>
            </div>
            <div class="modal-body">
                <div class="areaSelect" id="areaDialog">
                    <c:forEach items="${provinces}" var="province" varStatus="status">
                        <a href="javascript:getCity(${province.addressId})" code="${province.addressId}">
                                ${province.name}
                        </a>
                        <c:if test="${status.index != 0}">
                            <c:if test="${(status.index+1) % 3 == 0}">
                                <div class="city-select"></div>
                            </c:if>
                            <c:if test="${status.index ==provinces.size()-1}">
                                <div class="city-select"></div>
                            </c:if>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script id="slider-tml" type="text/html">
    <li><img src="\${url}"></li>
</script>

<script id="companyList-tml" type="text/html">
    <div class="seller-item-outline">
        <div class="seller-item">
        <div class="seller-dsc">
        <img src="\${user.userLogo}">
        <div class="dsc-info">
            <label>\${user.companyName}</label>
            <p>\${user.userDsc}</p>
        <span><img src="${ctx}/resources/portal/img/address.png">\${user.userAddressName.provinceName}\${user.userAddressName.cityName}\${user.userAddressName.twonName}\${user.userAdd.detailAddress}</span>
        </div>
        </div>
        <div class="seller-info">
        <span class="info-title"><img src="${ctx}/resources/portal/img/shop_info.png">相关资讯</span>
        <ul>
            {{each(index,info) info}}
        <li><a href="#">\${main_title}</a><span>\${formatDate(create_time)}</span></li>
            {{/each}}
    </ul>
    </div>
    </div>
    </div>
</script>
<script id="hotSearchshop-tml" type="text/html">
    <a href="javascript:window.location.href='${ctx}/shop/index/\${_id}'">\${stName}</a>
</script>
<script src="${ctx}/resources/portal/script/page.js" type="text/javascript"></script>
<script type="text/javascript">
    var city="default";
    var scope="LOGISTICS";
    userType=5;
    $(function () {
        loadSlider(city);
        loadLogisticsshop();
        loadflagShop("LOGISTICS_HOTSERACH", 'default', "hotSearchshop");
    })
    function loadSlider(city) {
        var data = {city: city};
        asyncAjax({
            url: ctx + "/home/slider/list/"+scope+"?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        $("#slider-ul").html("");
                        $("#slider-tml").tmpl(res["data"]).appendTo($("#slider-ul"));
                        // 修正轮播图插件图片宽度自适应问题

                        $(".slider-img").attr("style", "width:" + $(".slider-img-ul li").length * 100 + "% !important;");
                        $(".slider-img-ul>li>img").css({
                            width: $(".slider-wrap").width() + "px !important",
                            height: "auto !important"
                        });
                        $(".slider").xSlider({w: 1340});
                    }
                    else {
                        $("#newGood-table").html('<li><img src="${ctx}/resources/portal/img/banner/1-banner.jpg"></li>');
                    }
                }
                else {
                    bootbox.alert(res["msg"]);
                }
            }

        })
    }
    function loadLogisticsshop(pageNum){
        var data = {reviewStatus: 2,pageNum:pageNum||1,pageSize:10};
        asyncAjax({
            url: ctx + "/user/mgr/listwitharticle/5?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#companyList").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    $("#companyList").html("");
                    if (!isEmpty(res["data"])) {
                        $("#companyList-tml").tmpl(res["data"]).appendTo($("#companyList"));
                        $("#page").paging({
                            pageNo:pageNum || 1,
                            totalPage:Math.ceil(res.total/10),
                            totalSize: res.total,
                            callback: function() {
                                loadallshop(num);
                            }
                        })

                    } else {
                        $("#companyList").html("<div class='alert alert-warning'>该模块尚未配置推广商铺</div>");
                    }
                }  else {
                    bootbox.alert(res["msg"]);
                }
            }
        })

    }
    function searchSub(name, el, pageNum) {
        var data = {userType:userType};
        if (name == "keyword") {
            data = {keyword: $("#" + el).val(), userType: userType, pageNum: pageNum || 1, pageSize: 10};
        }
        if (name == "cityId") {
            data = {cityId: $("." + el).attr('value'), userType: userType, pageNum: pageNum || 1, pageSize: 10};
        }
        if(name == "default"){
        }
        asyncAjax({
            url: ctx + "/user/mgr/listwitharticle/"+userType+"?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#companyList").html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                if (res["result"] == "0") {
                    $("#companyList").html("");
                    if (!isEmpty(res["data"])) {
                        $("#companyList-tml").tmpl(res["data"]).appendTo($("#companyList"));

                        $("#page").paging({
                            pageNo: pageNum || 1,
                            totalPage: Math.ceil(res.total / 10),
                            totalSize: res.total,
                            callback: function (num) {
                                searchSub(name, el, num);
                            }
                        })

                    } else {
                        $("#companyList").html("<div class='alert alert-warning'>未搜到相关商家</div>");
                    }
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })

    }
    function getCity(provinceId) {
        $(".areaSelect a.active,.areaSelect .city-select.active").removeClass("active");
        $(".areaSelect a[code=\"" + provinceId + "\"]").addClass("active");
        var targetDiv = $(".areaSelect a[code=\"" + provinceId + "\"]").nextAll(".city-select")[0];
        $(targetDiv).addClass("active");

        var data = {provinceId: provinceId}
        asyncAjax({
            url: ctx + "/area/getAllcity?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function () {
                $(targetDiv).html("");
            },
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        var html = "";
                        $.each(res["data"], function (idx, item) {
                            html += "<a href='javascript:setCity("+item["addressId"]+","+"\""+ item["shortName"]+"\")' value=\"" + item["addressId"] + "\">" + item["shortName"] + "</a>";
                        })
                        $(targetDiv).html(html);
                    } else {
                    }
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }
    function setCity(cityId,shortName) {
        $(".city-select a[value=\"" + cityId + "\"]").removeClass("active");
        $(".city-select a[value=\"" + cityId + "\"]").addClass("active");
        $('.city-lable').attr('value',cityId);
        $('.city-lable').html(shortName);
        searchSub('cityId','city-lable',1);
        $("#areaSlectBox").modal("hide");
    }
    function showAreaDialog() {
        $("#areaSlectBox").modal("show");
    }
    function loadflagShop(type, city, target) {
        var data = {pageType: type, city: city,};
        asyncAjax({
            url: ctx + "/portal/shop/flag/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function (req) {
                $("#" + target).html('<i class="fa fa-spin fa-spinner"></i>正在刷新数据...');
            },
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    $("#" + target).html("");
                    if (!isEmpty(res["data"])) {
                        $("#" + target + "-tml").tmpl(res["data"]).appendTo($("#" + target));

                    } else {
                        $("#" + target).html("<div class='alert alert-warning'>该模块尚未配置推广商铺</div>");
                    }
                } else {
                    bootbox.alert(res["msg"]);


                }
            }
        })
    }
    function changecheck(obj){
        var aa = document.getElementsByName("seller");
        for (var i = 0; i < aa.length; i++) {
            aa[i].checked = false;
        }
        obj.checked = true;
    }
    /*收藏*/
    function collect(collectid){
        var celflag=document.getElementById(collectid).alt;


        if(celflag==0){

            document.getElementById(collectid).src="${ctx}/resources/portal/img/after_collect.png";
            document.getElementById(collectid).alt="1";
        }
        else{
            document.getElementById(collectid).src="${ctx}/resources/portal/img/before_collect.png";
            document.getElementById(collectid).alt="0";
        }

    }
</script>
</body>
</html>
